<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
		
	</head>
    <style>
        div.con{
            margin-top: 30px;
            width: 100%;
            height: 180px;
            background: white;
            box-shadow: 0 0 30px 3px rgb(190, 190, 182);
        }

        div.left{
            width: 28%;
            border-right: 1px solid rgb(206, 196, 196);
            height: 180px;
            float: left;
        }

        div.left>h1{
            font-size: 20px;
            font-weight: 500;
            text-align: center;
            line-height: 100px;
        }
        div.left>h3{
            font-size: 18px;
            font-weight: 500;
            color: rgb(170, 163, 163);
            text-align: center;
        }

        div.middle{
            width: 80%;
            height: 180px;
            
        }
        
        div.middle>p>span{
            font-size: 15px;
        }
        div.middle>p>span.tipcon{
            color: black;
            font-weight: 600;
        }
        div.middle>p>span.tip{
            display: inline-block;
            margin-left:15px;
            margin-top: 10px;
        }

        div.right{
            width: 25px;
            background: #078BDD;
            position: relative;
            left: 331px;
            bottom: 180px;
            color: white;
            height: 180px;
            text-align: center;
            padding-top: 50px;
            box-sizing: border-box;
            
        }




    </style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">体检报告查询</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
                
                <div class="con">
                    <div class="left">
                        <h1>张小华</h1>
                        <h3>女</h3>
                    </div>
                    <div class="middle">
                        <p><span class="tip">体检日期：</span><span class="tipcon">2016-10-20</span></p>
                        <p><span class="tip">档案号:</span><span class="tipcon">2016-10-20</span></p>
                        <p><span class="tip">体检日期：</span><span class="tipcon">2016-10-20</span></p>
                        <p><span class="tip">长传时间</span><span class="tipcon">2016-10-20</span></p>
                        
                    </div>
                    <div class="right">
                        体检报告
                    </div>
                </div>

                <div class="con">
                    <div class="left">
                        <h1>张小华</h1>
                        <h3>女</h3>
                    </div>
                    <div class="middle">
                        <p><span class="tip">体检日期：</span><span class="tipcon">2016-10-20</span></p>
                        <p><span class="tip">档案号:</span><span class="tipcon">2016-10-20</span></p>
                        <p><span class="tip">体检日期：</span><span class="tipcon">2016-10-20</span></p>
                        <p><span class="tip">长传时间</span><span class="tipcon">2016-10-20</span></p>
                        
                    </div>
                    <div class="right">
                        体检报告
                    </div>
                </div>

                
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
		</script>
	</body>

</html>